<template>
  <!-- 使用方法 -->
  <!-- <valid-code :value.sync="validCode"></valid-code> -->
  <div
    class="ValidCode disabled-select"
    :style="`width:${width}; height:${height}`"
    @click="refreshCode"
  >
    <span
      v-for="(item, index) in codeList"
      :key="index"
      :style="getStyle(item)"
      >{{ item.code }}</span
    >
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class extends Vue {
  @Prop({ default: "100px" }) width!: string;
  @Prop({ default: "40px" }) height!: string;
  @Prop({ default: 4 }) length!: number;

  public codeList: any = [];
  mounted() {
    // 页面初始化生成验证码
    this.createdCode();
  }
  private refreshCode() {
    // 点击刷新验证码
    this.createdCode();
  }
  private createdCode() {
    // 生成验证码
    const len = this.length,
      codeList = [],
      chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
      charsLen = chars.length;
    // 生成
    for (let i = 0; i < len; i++) {
      const rgb = [
        Math.round(Math.random() * 220),
        Math.round(Math.random() * 240),
        Math.round(Math.random() * 200)
      ];
      codeList.push({
        code: chars.charAt(Math.floor(Math.random() * charsLen)),
        color: `rgb(${rgb})`,
        fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
        padding: `${[Math.floor(Math.random() * 10)]}px`,
        transform: `rotate(${Math.floor(Math.random() * 90) -
          Math.floor(Math.random() * 90)}deg)`
      });
    }
    // 指向
    this.codeList = codeList;
    // 将当前数据派发出去
    this.$emit("update:value", codeList.map(item => item.code).join(""));
  }
  private getStyle(data: any) {
    return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
  }
}
</script>

<style scoped lang="scss">
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  span {
    display: inline-block;
  }
}
</style>
